<script setup lang="ts">
import { ref, watch, computed, onMounted } from 'vue'
import { roleStore } from '@/stores/role'
import { headersStore } from '@/stores/apiHeader'
import GroupModuleAllRight from '@/components/PermissionsModule/Finance/Group/GroupModuleAllRight.vue'
import MyModuleAllRight from '@/components/PermissionsModule/Finance/Group/MyModuleAllRight.vue'
import { useDialogStore } from '@/stores/dialog'
const dialogStore = useDialogStore()
const { dialogInfo } = dialogStore
const store = roleStore() as any
const { financeLevel } = store

const rule = ref() // 1 普通 2 中级 3 高级
const info = () => {
  rule.value = financeLevel
}
info()
// 1 全球 2 区域 3 国家
const newRole = ref(0)
newRole.value = financeLevel // 初始化面板权限
//获取当前月份
const month = computed(() => {
  return headersStore().month
})
// 区分全球区域对比或国家对比  0各个区域，1 各个国家 默认空
const every_code = computed(() => {
  return headersStore().every_code
})
// 深度监听 store.panelPermissions
watch(
  () => store.financeLevel,
  (newVal) => {
    newRole.value = newVal
  }
)

const groupBoxRef = ref(null)
const showMore = ref(true)
let timer = null

// 开始计时
const startTimer = () => {
  if (showMore.value && groupBoxRef.value) {
  }
  timer = setInterval(() => {
    groupBoxRef?.value?.hidden('r-box')
  }, 30000)
}

// 重置计时
const resetTimer = () => {
  clearTimeout(timer)
  if (!dialogInfo.visible) {
    startTimer()
  }
}
window.addEventListener('mousemove', resetTimer)
window.addEventListener('keydown', resetTimer)
window.addEventListener('click', resetTimer)
onMounted(() => {
  startTimer()
})
</script>

<template>
  <GroupBox
    pName="r-box"
    transition="right"
    ref="groupBoxRef"
    :showMore="true"
    :title="$t('bi_finance_profitoverview')"
  >
    <template #title> {{ $t('bi_finance_profitoverview') }} </template>
    <template #first>
      <GroupModuleAllRight />
    </template>
    <template #second>
      <GroupModuleAllRight :showRemainingComponents="true" />
    </template>
  </GroupBox>
  <GroupBox
    pName="r-box"
    transition="right"
    :showMore="true"
    :title="$t('bi_finance_marginalcontributionoverview')"
    v-if="month == '00' || every_code != ''"
  >
    <template #title v-if="month == '00' || every_code != ''">
      {{ $t('bi_finance_marginalcontributionoverview') }}
    </template>
    <template #first>
      <MyModuleAllRight />
    </template>
    <template #second>
      <MyModuleAllRight :showRemainingComponents="true" />
    </template>
  </GroupBox>
</template>
<style lang="scss" scoped></style>
